<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('综合图表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-md-12 search-collapse">
            <form id="queryForm">
                <div class="select-list">
                    <ul id="queryUl" th:utext="${queryHtml}">
                    </ul>
                </div>
            </form>
        </div>
        <div th:utext="${contentHtml}">

        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script>
    function importTable() {
        var value ,name;
        $("div[name=viewContent]").each(function (index,item) {
            if($(this).attr("type")=="chart") {
                var paramDiv = $(this).find("div[name=param]");
                var chartDiv = $(this).find("div[name=chart]");
                paramDiv.hide();
                var param = JSON.parse(paramDiv.html());

                var haveEnd = $("#queryForm").find("input[name=endDate]");
                if(haveEnd.length==0) {
                    param.queryParamVO.endDate=null;
                }
                $("#queryForm").find("input").each(function (index,item) {
                    value = $(item).val();
                    if(value!=undefined) {
                        name = $(item).attr("name");
                    }
                    if("startDate"==name) {
                        param.queryParamVO.startDate=value;
                    } else if("endDate"==name) {
                        param.queryParamVO.endDate=value;
                    } else {
                        //param.queryParamVO.dimVOList
                    }
                });
                debugger;
                var chartType = param.chartStyleVO.chartType;
                if(chartType!="table") {
                    return ;
                }
                $.ajax({
                    url: '/base/etl/chart/dmCommon/export',
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(param),
                    success: function (result) {
                        if(result.code==0) {
                            window.location.href = ctx + "common/download?fileName=" + encodeURI(result.data) + "&delete=" + true;
                        } else {
                            $.modal.alertError(result.msg);
                        }
                    }
                });
            }
        });
    }
    function refresh() {
        var value ,name;
        $("div[name=viewContent]").each(function (index,item) {
            if($(this).attr("type")=="chart") {
                var paramDiv = $(this).find("div[name=param]");
                var chartDiv = $(this).find("div[name=chart]");
                paramDiv.hide();
                var param = JSON.parse(paramDiv.html());

                var haveEnd = $("#queryForm").find("input[name=endDate]");
                if(haveEnd.length==0) {
                    param.queryParamVO.endDate=null;
                }
                $("#queryForm").find("input").each(function (index,item) {
                    value = $(item).val();
                    if(value!=undefined) {
                        name = $(item).attr("name");
                    }
                    if("startDate"==name) {
                        param.queryParamVO.startDate=value;
                    } else if("endDate"==name) {
                        param.queryParamVO.endDate=value;
                    } else {
                        //param.queryParamVO.dimVOList
                    }
                });
                $.ajax({
                    url: '/base/etl/chart/dmCommon',
                    type: 'post',
                    dataType: 'json',
                    beforeSend: function(request) {
                        request.setRequestHeader("token",sessionStorage.getItem("token"));
                    },
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(param),
                    success: function (result) {
                        debugger;
                        if(result.code==0) {
                            var data = result.data;
                            var shapeType = data.shapeType;
                            if(shapeType=="table") {
                                chartDiv.html("<table id=\"mainTable\" class=\"table table-bordered\">\n" +
                                    "                <thead></thead>\n" +
                                    "                <tbody></tbody>\n" +
                                    "            </table>");
                                showTableData(data.data,"mainTable");
                            } else {
                                debugger;
                                chartDiv.css("height","400px");
                                var echartsInstance=echarts.init(chartDiv[0]);
                                echartsInstance.setOption(eval('(' + data.data + ')'));
                            }
                        }
                    }
                });
            }
        });
    }
    $(function() {
        var dType='M',format,type;
        if(dType=="D") {
            format = "yyyy-MM-dd";
            type = "day";
        } else if(dType=="M") {
            format = "yyyy-MM";
            type = "month";
        }
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            var now = new Date();
            var startDate = laydate.render({
                elem: '#laydate-startDate',
                max: "new Date()",
                format: format,
                theme: 'molv',
                type: type,
                trigger: 'click'
            });
            var endDate = laydate.render({
                elem: '#laydate-endDate',
                max: "new Date()",
                format:format,
                type: type,
                theme: 'molv',
                trigger: 'click'
            });
        });
        refresh();
    });
</script>
</body>
</html>